<template>
  <div class="subject-container">
    <div class="subject_left">
      <div class="subject_title">Mybatis专栏</div>
      <div
        class="subject_part"
        v-for="(item, index) in subjectList"
        :key="item.typeName"
      >
        <div class="subject_text">{{ item.typeName }}</div>
        <div
          class="subject_part_item"
          v-for="(item1, index1) in item.articleList"
          :key="item1.articleId"
        >
          <button
            type="text"
            @click="switchSubject(index, index1)"
            :class="[
              'subject_section',
              item1.articleId == activeArticleId ? 'active_message' : '',
            ]"
          >
            {{ item1.articleTitle }}
          </button>
        </div>
      </div>
    </div>
    <div class="subject_right">
      <div class="section">{{ subjectInfo.articleTitle }}</div>
      <div class="subject_img" v-if="subjectInfo.firstPicture != ''">
        <img
          style="width: 100%; height: 300px"
          :src="subjectInfo.firstPicture"
        />
      </div>
      <div class="subject_author">作者：{{ subjectInfo.articleAuthor }}</div>
      <div class="subject_code">
        源码：<span style="color: #53c3c4"
          >https://gitee.com/myFY654/yaling_blog_api.git</span
        >
      </div>
      <div class="contain">
        <div class="subject_content">
          <mavon-editor
            style="height: 100%; z-index: 1"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
            :ishljs="true"
            :value="subjectInfo.articleContent"
          >
          </mavon-editor>
          <div class="update_time">
            上次更新时间：{{ subjectInfo.updateTime | formatDate }}
          </div>
        </div>
      </div>
      <div class="subject_next">
        <div class="subject_btn">
          <el-button
            v-if="hasPre"
            @click.native="preArticle"
            icon="el-icon-back"
            style="margin-left: 20px"
            type="text"
            >上一篇</el-button
          >
          <el-button
            v-if="hasNext"
            @click.native="nextArticle"
            class="btn_next"
            type="text"
            >下一篇 <i class="el-icon-right"></i
          ></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/subject.css";
import { formatDate } from "@/utils/date";
import { getSubjectInfo } from "@/api/subject";
export default {
  name: "subject",
  data() {
    return {
      subjectList: [],
      subjectId: this.$route.query.subjectId,
      subjectInfo: null,
      index1: 0,
      index2: 0,
      hasPre: false,
      hasNext: true,
      activeArticleId: null,
    };
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy/MM/dd");
    },
  },
  created() {
    this.getSubjectInfoFun();
  },
  methods: {
    getSubjectInfoFun() {
      getSubjectInfo({ subjectId: this.subjectId }).then((response) => {
        if (response.code == 200) {
          this.subjectList = response.data;
          this.subjectInfo = this.subjectList[0].articleList[0];
          this.activeArticleId = this.subjectInfo.articleId;
        }
      });
    },
    switchSubject(index1, index2) {
      this.index1 = index1;
      this.index2 = index2;
      this.subjectInfo = this.subjectList[index1].articleList[index2];
      this.activeArticleId = this.subjectInfo.articleId;
      // 同时需要判断是否存在上一篇和下一篇
      this.hasPre = this.isPre(this.index1, this.index2);
      this.hasNext = this.isNext(this.index1, this.index2);
    },
    preArticle() {
      if (!this.hasNext) {
        this.hasNext = true;
      }
      if (this.hasPre) {
        if (this.index2 == 0) {
          this.index1--;
          this.index2 = this.subjectList[this.index1].articleList.length - 1;
        } else {
          this.index2--;
        }
        this.subjectInfo =
          this.subjectList[this.index1].articleList[this.index2];
        // 设置hasPre的值
        this.hasPre = this.isPre(this.index1, this.index2);
        this.activeArticleId = this.subjectInfo.articleId;
      }
    },
    isPre(index1, index2) {
      // 如果为第一个则直接返回false
      if (index1 == 0 && index2 == 0) {
        return false;
      }

      // 如果前面存在空模块
      if (index1 > 0 && this.subjectList[index1 - 1].length == 0) {
        index1--;
        return this.isPre(index1, index2);
      }
      return true;
    },
    nextArticle() {
      if (!this.hasPre) {
        this.hasPre = true;
      }
      if (this.hasNext) {
        if (
          this.index2 ==
          this.subjectList[this.index1].articleList.length - 1
        ) {
          this.index1++;
          this.index2 = 0;
        } else {
          this.index2++;
        }
        // 设置hasNext的值
        this.subjectInfo =
          this.subjectList[this.index1].articleList[this.index2];
        this.hasNext = this.isNext(this.index1, this.index2);
        this.activeArticleId = this.subjectInfo.articleId;
      }
    },
    isNext(index1, index2) {
      // 如果是最后一个index1 和 最后一个index2
      console.log(index1, index2);
      if (
        index1 == this.subjectList.length - 1 &&
        this.subjectList[index1].articleList.length - 1 == index2
      ) {
        return false;
      }

      // 最后一个
      if (
        index1 == this.subjectList.length - 1 &&
        this.subjectList[index1].articleList.length == 0
      ) {
        return false;
      }
      // 判断当前存在
      // if (this.subjectList[this.index1].articleList.length != 0)

      // 判断下一个标题是否为空
      if (
        index1 < this.subjectList.length &&
        this.subjectList[index1 + 1].articleList.length == 0
      ) {
        index1++;
        return this.isNext(index1, index2);
      }
      return true;
    },
  },
};
</script>

<style></style>
